<template>
    <div class="header">
        <div class="left-header">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="mid-header">
            <span class="iconfont">&#xe632;</span>
        </div>
        <router-link :to="{name:'City'}">
            <div class="right-header">
                {{this.city}}
                <span class="iconfont">&#xe6aa;</span>
            </div>
        </router-link>
        
    </div>
    
</template>
<script>
import {mapState, mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['city']),
        ...mapGetters(['doubleCity'])
    }
}
</script>
<style scoped>
    .header{
        display: flex;
        height:0.86rem;
        line-height: 0.86rem;
        background-color: #00bcd4;
    }
    
    .left-header{
        width: .64rem;
        padding-left: 8px;
      float: left;

    }
    .mid-header{
        flex: 1;
        margin: 10px 0;
        line-height: 0.46rem;
        padding-left: 5px;
        background-color: #fff;
        border-radius: 5px;
    }
    .right-header{
        min-width:1.04rem;
        padding:0 0.1rem;
        float: right;
        text-align: center;
        color:#fff
    }
</style>
